<template>
	<kb-layout>
		<up-swiper height="140" :list="[ee.wxapp.send_index_banner]" :radius="0" :circular="true"></up-swiper>
		 
	
	<view class="form">
		
		<view class="form-head">
			<text class="title">房源信息录入</text>
			<text class="red">(必填)</text>
		</view>
		<up-form
			labelPosition="left"		 
			:model="form"
			:labelStyle="{fontSize:'16px'}"
			:rules="rules"
			ref="sendform"
			errorType="toast"
			>		 	
		<u-form-item label="区  域" prop="area" labelWidth="100">
			 <up-input
					v-model="form.area"
					border="none" 
					placeholder="您想住的区域"
					@focus="this.showArea = true"
			></up-input> 
			<template #right>
				<up-icon
					name="arrow-right"
				></up-icon>
			</template>		
		</u-form-item>
		
		<u-form-item label="户 型" prop="huxing" labelWidth="100">
			 <up-input
					v-model="form.huxing"
					border="none" 
					placeholder="您想住的户型"
					@focus="this.showhx=true"
			></up-input>
			<template #right>
				<up-icon
					name="arrow-right"
				></up-icon>
			</template>		
		</u-form-item>
		<!-- 求租和求购的价格区别对待 -->
		<u-form-item v-if="form.send_type=='qiugou'" 
		label="价 格" prop="price" labelWidth="100">
			 <up-input
					v-model="form.price"
					border="none" 
					placeholder="您期望的价格"					 
			></up-input>
			 <template #right>
				 <text>万元</text>
			 </template>		
		</u-form-item>
		<u-form-item v-else  label="租 金" prop="price" labelWidth="100">
			 <up-input
					v-model="form.price"
					border="none" 
					placeholder="您期望的租金"					 
			></up-input>
			<template #right>
		 	  <text>元/月</text>
			</template>			
		</u-form-item>
		
		<!-- 求租和求购的价格区别对待 -->
		
		<u-form-item label="称 呼" prop="nickname" labelWidth="100">
			 <up-input
					v-model="form.nickname"
					border="none" 
					placeholder="如何称呼您"					 
			></up-input>
		  		
		</u-form-item>
		
		<u-form-item label="联系方式" prop="mobile" labelWidth="100">
			 <up-input
					v-model="form.mobile"
					border="none" 
					placeholder="请输入您的手机号"					 
			></up-input>
		 		
		</u-form-item>
		
		<view class="form-action">
		 <view class="acbod">
				<up-button type="primary"
			  @click="submitForm"
			   :text="btntext"></up-button> 
		  </view> 
		</view>	
	</up-form>
	
	<up-action-sheet
					:show="showArea"
					@close="showArea=false"					
					title="请选择区域"
					:round="10"
				>
		<view class="sheet">
		 <view class="sheet-area">
			 
			 <up-collapse :accordion="true">
			     <up-collapse-item
				   v-for="(item, index) in areas"
				   :key="index"
			       :title="item.title"
			     >
			<template #title>
			     <text class="u-page__item__title__slot-title">{{item.title}}</text>
				 <text class="blue">{{item.subtitle}}</text>
			  </template>
			 <!-- 多选 -->
			 <view class="sheet-content u-flex u-flex-start u-flex-wrap">
			 <view class="tag" v-for="(quan, k) in item.children" :key="k">
			 	<up-tag :text="quan.title"
				 :plain="!quan.checked"
				   :name="index +'-'+ k "  shape="circle"	:plainFill="true"	 
				   @click="quan_tag_click">
			 	</up-tag>
			 </view>
			 </view>
			</up-collapse-item>
		</up-collapse>
		</view>
		<!-- 关闭提交按钮 -->
		 <view class="sheet-action">
			<up-button type="primary" @click="sheetQuanAreaOk" text="确定"></up-button> 
		 </view>
		</view> 	 
	</up-action-sheet>
	
	<up-action-sheet
				:show="showhx"
				@close="showhx=false"
				title="请选择户型"
				:round="10"
			>
	 <view class="sheet">
		 <!-- 多选 -->
		 <view class="sheet-hx u-flex u-flex-start u-flex-wrap">
		 <view class="tag" v-for="(item, index) in checkboxs" :key="index">
		 	<up-tag :text="item.name"
			 :plain="!item.checked"
			   :name="index" shape="circle"	:plainFill="true"	 
			 
			  @click="checkboxClick">
		 	</up-tag>
		 </view>
		 </view>
		 <view class="sheet-action">
			<up-button type="primary" @click="checkboxOk" text="确定"></up-button> 
		 </view>
		 
	 </view>	 
 </up-action-sheet>
</view>
</kb-layout>
</template>

<script>
	import {qiugou_rules} from "./rules.js";
	import util from "@/common/tools/utils.js";
	export default{
		
		data(){
			return {
				form:{
					area: "",
					area_quan:"",
					huxing:"",
					price: "",
					nickname:"",
					mobile: "",
					send_type: undefined ,//求购类型
				},  
				areas: this.ee.areas,
				rules: qiugou_rules,
				showArea: false, //显示区域选择
				showhx: false, //显示户型选择
				checkboxs:[
					{ checked: false, name :"1室" },
				    { checked: false , name :"2室"},
					{ checked: false , name :"3室"},
					{ checked: false , name :"4室"},
					{ checked: false , name :"5室"},
					{ checked: false , name :"6室以上"}
				],
				submiting:false, //正在提交
				btntext:'发布求购'
			}
		},
		onLoad( option ) {
			this.form.send_type = option?.type ? option.type : 'qiugou'
		} ,
		watch:{
			"form.send_type":function( value ){
				 
				let title = "免费发布求购";
				if (value == 'qiuzu'){
					title = '免费发布求租';
					this.btntext = '发布求租';
				}
					
			
				uni.setNavigationBarTitle({
					title:  title  
				})	 		
			}
		},
		mounted() {
			//直接进入页面可能没取到initdata的数据
			if(!this.ee.areas){
				this.ee.initData().then(ret=>{
					this.areas = ret.areas_quan;
					 
				}) 
				
			}
			util.getModuleData("webfront/checklogin")
		},
		 
		methods:{
			submitForm(e){
			
		     this.$refs.sendform.validate().then(valid => {  
				   if (valid) {  
				      // uni.$u.toast('校验通过') 
					  this.post_form()
				    }   
			   }).catch(e=>{})  
			},
			post_form(){
				if(this.submiting) return ;				
				this.submiting = true; //防止多次提交按钮
				this.kbutil.getModuleData("demand/index", this.form ).then(ret =>{
					this.$refs.sendform.resetFields();//重置
					this.submiting = false;
					uni.showToast({
						title: '发布成功！',
					})
					//catch 服务器返回错误时
				}).catch(e=> this.submiting = false)
			},
			quan_tag_click(name){
				var arr = name.split("-");
				var count = 0;
				this.areas[ arr [0] ] .children[arr[1]].checked = !this.areas[ arr [0] ] .children[arr[1]].checked ; 
				this.areas[ arr [0] ] .children.forEach((item,i)=>{
					if(item.checked == true){
						count = count + 1;
					}
				})
				if(count)
					this.areas[ arr [0] ].subtitle = "已选("+count+")个商圈";
				else 
					this.areas[ arr [0] ].subtitle = "";
			},
			sheetQuanAreaOk()
			{
				var a = [];
				var aq = []
				this.areas.forEach( (item ,i) =>{
					item.children.forEach( q => {
						if( q.checked == true){
							a.push(q.title)
							aq.push( item.title + "-" + q.title)
						}						
					 }) 
				})
				 
				this.form.area = a.join(",");
				this.form.area_quan = aq.join(",");
				this.showArea = !this.showArea
			},
			checkboxClick(i){
				this.checkboxs[i].checked = !this.checkboxs[i].checked
			},
			checkboxOk(){
				var hx = [];
				this.checkboxs.forEach((item)=>{
					if(item.checked)
						hx.push(item.name)
				})
				this.form.huxing = hx.join(",");
				this.showhx = !this.showhx
			}
		}
	}
</script>

<style lang="scss">
 
	 @import  "send.scss" ;
 
</style>